<template>
	<view class="tt-wrapper">
		<view>
			<!-- <ttOwnComp></ttOwnComp> -->
		</view>
		<view>
			<ttSwiperComp :bannerList="bannerList" :index="index"></ttSwiperComp>
		</view>
		<view>
			<ttSloganComp></ttSloganComp>
		</view>
		<view>
			<ttClockComp></ttClockComp>
		</view>
		<view>
			<ttSearchComp></ttSearchComp>
		</view>
		<view class="tt-tab">
			<view class="tt-tab-box">
				<view @click="setTabItem" :class="['opt',{'active': num==0}]" data-num="0">嵌入式</view>
				<view @click="setTabItem" :class="['opt',{'active': num==1}]" data-num="1">Java题</view>
				<view @click="setTabItem" :class="['opt',{'active': num==2}]" data-num="2">前端题</view>
				<view @click="setTabItem" :class="['opt',{'active': num==3}]" data-num="3">HR题</view>
				<view @click="setTabItem" :class="['opt',{'active': num==4}]" data-num="4">测试</view>
			</view>
		</view>
		<view>
			<block v-for="(item,index) in topicList" :key="item.id">
				<ttListItem :topicItem="item"></ttListItem>
			</block>
		</view>
	</view>
</template>

<script>
	import ttSwiperComp from '../../components/mySwiper/tt-swiper-comp.vue';
	import ttSloganComp from '../../components/mySlogan/tt-slogan-comp.vue';
	import ttClockComp from '../../components/myClock/tt-clock-comp.vue';
	import ttSearchComp from '../../components/mySearch/tt-search-comp.vue';
	import ttListItem from '../../components/myListItem/tt-list-item.vue';
	import ttOwnComp from '../../components/myOwn/tt-own-comp.vue';
	import { getFunc } from "../../utils/http.js";
	import { setItem,getItem,removeItem } from "../../utils/myStorage.js";
	
	export default {
		data() {
			return {
				// 索引值
				index:0,
				// 轮播图数组
				bannerList:[
					{id:1, src:"http://47.93.52.8:9091/static/img/fengmian1.jpeg"},
					{id:2, src:"http://47.93.52.8:9091/static/img/fengmian2.jpeg"}
				],
				// 控制tab切换
				num: 0,
				// 首页列表
				topicList:[
					
				],
				// 0    嵌入式
				// 1    java
				// 2    前端
				// 3    HR题
				// 4    测试
				// 造数据
				result:[
					{
						id:"1",
						name:"嵌入式",
						total: 80,
						src:"https://nudianli.com/topic/lot.png",
						type:"0"
					},
					{
						id:"2",
						name:"Vue",
						total: 10,
						src:"https://nudianli.com/topic/vue.png",
						type:"2"
					},
					{
						id:"3",
						name:"java",
						total: 22,
						src:"https://nudianli.com/topic/java.png",
						type:"1"
					},
					{
						id:"4",
						name:"小程序",
						total: 45,
						src:"https://nudianli.com/topic/web.png",
						type:"2"
					},
					{
						id:"5",
						name:"测试",
						total: 33,
						src:"https://nudianli.com/topic/test.png",
						type:"4"
					},
					{
						id:"6",
						name:"测试1",
						total: 34,
						src:"https://nudianli.com/topic/test.png",
						type:"4"
					},
					{
						id:"7",
						name:"职场",
						total: 6,
						src:"https://nudianli.com/topic/worker.png",
						type:"3"
					},
					{
						id:"8",
						name:"职场123",
						total: 5,
						src:"https://nudianli.com/topic/worker.png",
						type:"3"
					},
					{
						id:"9",
						name:"嵌入式",
						total: 12,
						src:"https://nudianli.com/topic/lot.png",
						type:"0"
					}
				]
			}
		},
		components: {
			ttSwiperComp,
			ttSloganComp,
			ttClockComp,
			ttSearchComp,
			ttListItem,
			ttOwnComp
		},
		onLoad() {
			this.manageData();
		},
		methods: {
			setTabItem (event){
				let v = event.currentTarget.dataset.num;
				this.num = v;
				// 数据分类
				this.manageData(this.num);
			},
			manageData(type="0"){
				new Promise((resolve,reject)=>{
					let arr = [];
					this.result.forEach((item)=>{
						if(item.type == type) {
							arr.push(item)
						}
					})
					if(arr.length != 0){
						resolve(arr)
					}
				})
				.then(
					arr=> {
						this.topicList = arr;
					}
				)
			}
		}
	}
</script>

<style lang="scss">
@import "../../uni.scss";
	.tt-wrapper {
		font-family: Arial, Helvetica, sans-serif;
	}
	.tt-tab {
		margin-top: 20rpx;
		width: 100%;
		box-sizing: border-box;
		height: 80rpx;
		.tt-tab-box {
			
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			height: 80rpx;
			display: flex;
			align-items: center;
			.opt {
				flex-basis: 25%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				border-bottom: 4rpx solid transparent;
				text-align: center;
			}
			.active {
				color: #1296db;
				border-bottom: 4rpx solid #1296db;
			}
		}
	}
</style>
